<template>
	<view class="wallet hv100  clearfix ">
		<cu-custom bgColor="bg-white" isBack >
			<block slot="content">订单详情</block>
		</cu-custom>
		<view v-if="isblocking">
			<view class="orderxq-boxs flex justify-center align-center">
				<!-- <image :src="'/static/my/order'+status+'.png'" class="block19 mr5"></image> -->
				<text class="ml5 text-white f16">{{orderxq[status]}}</text>
			</view>
			<view class="px15 bg-white mt5 py15 flex align-center justify-between">
				<image src="/static/order/address.png" class="addrsspic" ></image>
				<view class="flex wsaddress flex-direction align-start" @click="pushaddress" v-if="selAddress.id==''||selAddress.id==null">
					<text class="ellipsis2 f14 py5 color-black">请选择收货地址</text>
				</view>
				<view class="flex wsaddress flex-direction align-start" v-else @click="pushaddress">
					<view class="flex  py5 align-center wp100 justify-between">
						<text class="f14">{{selAddress.name}}</text>
						<text class="f14">{{selAddress.tel}}</text>
					</view>
					<text class="ellipsis2 f14 py5">{{selAddress.sheng}}{{selAddress.shi}}{{selAddress.xian}}{{selAddress.street}}</text>
				</view>
				<text class="cuIcon-right"></text>
			</view>
			<view class="mt10 bg-white flex flex-direction">
				<view  class="flex flex-direction pt20 mt5">
					<view class="flex align-center justify-start pb10 bb1 px15" v-if="storeid!=0">
						<text class="cuIcon-shop f18" @click="pushPage('/pages/store/index?id='+storeid)"></text>
						<text class="ml10" @click="pushPage('/pages/store/index?id='+storeid)">{{storeName}}</text>
						<text class="cuIcon-right ml5" @click="pushPage('/pages/store/index?id='+storeid)"></text>
					</view>
					<view class="flex align-center justify-start mt10 " v-for="(item,index) in goodsInfo" :key="index">
						<view class="flex flex-direction wp100 ">
							<view class="flex align-center justify-between bb1 px15 pb10">
								<view class="block70 border-info radius-5 discenter"><image :src="item.pic" class="block70"></image></view>
								<view class="flex flex-direction align-start justify-between ml15 h70 mworde">
									<view class="flex flex-direction pr10 wp100">
										<text class="ellipsis ">{{item.name}}</text>
										<text class="ellipsis wp100 mt5 f12 text-info">{{item.cname}}</text>
									</view>
									<view class="flex align-end  justify-between wp100">
										<text class="text-prices" v-if="isVal!=4">￥{{item.money}}</text>
										<text class="text-prices" v-else>{{item.money}}益豆</text>
										<text class="">X{{item.num}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="flex flex-direction  py15 px15 bg-white" v-if="status==0">
				<text class="text-black">买家留言</text>
				<textarea v-model="liuyans" maxlength="120" class="mt10 px10 f14 py10  border-1 text-black h100 wp100" placeholder-class="color-info" placeholder="订单补充说明"></textarea>
			</view>
			<view class="flex flex-direction wp100 bg-white mt5 px15 mb50" v-if="status==0">
				<view class="py15">选择支付方式</view>
				<view class="flex flex-direction">
					<view class="flex align-center pt10 pb5" v-if="isVal!='4'">
						<image src="/static/order/choice.png" v-if="radio==1" class="block20"></image>
						<image src="/static/order/nochoice.png" @click="radio=1" v-else class="block20"></image>
						<image src="/static/order/weixin@2x.png" class="block25  ml20 mr10" mode=""></image>
						<text class="">微信</text>
					</view>
					<view class="flex align-center pt15 pb15" v-if="isVal!='4'">
						<image src="/static/order/choice.png" v-if="radio==2" class="block20"></image>
						<image src="/static/order/nochoice.png" @click="radio=2" v-else class="block20"></image>
						<image src="/static/order/airpay.png" class="block25  ml20 mr10" mode=""></image>
						<text class="">支付宝</text>
					</view>
					<view class="flex align-center pt15 pb15" v-if="isVal!='4'">
						<image src="/static/order/choice.png" v-if="radio==3" class="block20"></image>
						<image src="/static/order/nochoice.png" @click="radio=3" v-else class="block20"></image>
						<image src="/static/order/yue.png" class="block25  ml20 mr10" mode=""></image>
						<text class="">余额</text>
					</view>
					<view class="flex align-center pt15 pb15">
						<image src="/static/order/choice.png" v-if="radio==4" class="block20"></image>
						<image src="/static/order/nochoice.png" @click="radio=4" v-else class="block20"></image>
						<image src="/static/order/dou.png" class="block25  ml20 mr10" mode=""></image>
						<text class="">益豆</text>
					</view>
					<view class="flex align-center pt15 pb15" v-if="isVal!='4'">
						<image src="/static/order/choice.png" v-if="radio==5" class="block20"></image>
						<image src="/static/order/nochoice.png"  v-else class="block20"></image>
						<image src="/static/order/douxin.png" class="block25  ml20 mr10" mode=""></image>
						<text class="">微信加益豆</text>
					</view>
				</view>
			</view>
			<view class="flex flex-direction bg-white  px15 f14 pb20" v-else>
				<view class="flex align-center justify-between py10 mt10">
					<text class="text-info">订单编号:</text>
					<view class="flex align-center liuyan-box ml20">
						<text class="text-black">{{order.orderSn}}</text>
					</view>
				</view>
				<view class="flex align-center justify-between py10">
					<text class="text-info">下单时间:</text>
					<view class="flex align-center liuyan-box ml20">
						<text class="text-black">{{order.ordertime}}</text>
					</view>
				</view>
				<view class="flex align-center justify-between py10">
					<text class="text-info">支付方式:</text>
					<view class="flex align-center liuyan-box ml20">
						<text class="text-black">{{ordrpaylist[order.paytype]}}</text>
					</view>
				</view>
				<view class="flex align-start py10 ">
					<text class="text-info">买家留言:</text>
					<view class="flex align-center liuyan-box ml20">
						<text class="text-black">{{order.liuyan}}</text>
					</view>
				</view>
			</view>
			<view class="confirm-box flex align-center  justify-between" v-if="order.status!=2">
				<view class="flex align-center pl15">
					<text class="text-black ">总计:</text>
					<text class="text-prices ml10 f16" v-if="isVal!=4">￥{{countMoney}}</text>
					<text class="text-prices ml10 f16" v-else>{{countMoney}}益豆</text>
				</view>
				<view class="flex align-center justify-end">
					<view class="order-quxiao discenter  mr15" v-if="status==0" @click="quxiao">取消</view>
					<view class="order-del discenter  mr15" v-if="status==0" @click="isqueren">付款</view>
					<!-- <view class="order-quxiao discenter text-white mr15" v-if="status==3" @click="stuikuan">申请退款</view> -->
					<view class="order-del discenter  mr15" v-if="status==2" @click="sureshouhuo">确认收货</view>
				</view>
				<view class="order-del discenter  mr15" v-if="status==3" @click="quxiao">删除</view>
			</view>
			<view @touchmove.stop.prevent class="cu-modal" :class="modalName == 'onlineModal' ? 'show' : ''">
				<view class="cu-dialog bg-white" @tap.stop>
					<view class="py20 discenter f16 fwb">取消订单</view>
					<view class="mb40" v-if="status==0">您确定要取消该订单吗？</view>
					<view class="mb40" v-if="status==3">您确定要删除该订单吗？</view>
					<view class="action h50 mx0 flex-sub f12  bt1  flex align-center justify-between px30 ">
						<view class="w-50 discenter br1">
							<text @click="HideModal" class="px20 py10 radius-5 f15 color-black">取消</text>
						</view>
						<view class="w-50 discenter">
							<text @click="quxiaosure" class="px20 py10 radius-5 f15 color-black">确定</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- mask层 -->
		<view :class="['mask', show ? '' : 'visible']"></view>
		<!-- 密码 -->
		<view :class="['contents', show ? '' : 'contenthide']">
			<view class="title">
				<view class="close" @click="close()"><text class="cuIcon-close"></text></view>
				<view class="center">请输入支付密码</view>
				<view class="close"></view>
			</view>
			<view :class="['code', show ? '' : 'visible']">
				<view class="code-box">
					<block v-for="(item, index) in 6" :key="index">
						<view class="code-box-item">{{ (password[index] && '●') || '' }}</view>
					</block>
				</view>
				<!-- <input type="number" v-model="password" /> -->
			</view>			
		</view>
		<!-- 键盘 -->
		<view v-if="show" :class="['keyboard', show ? '' : 'active', isIphoneX ? 'isIphone' : '']">
			<block v-for="(item, index) in 9" :key="index">
				<view class="keyboard-item" @tap="key(index + 1)">{{index + 1}}</view>
			</block>
			<view class="keyboard-item hide"></view>
			<view class="keyboard-item" @tap="key(0)"><text>0</text></view>
			<view class="keyboard-item delte" @tap="del()"><text class="cuIcon-delete"></text></view>
		</view>
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
	data() {
		return {
			//支付密码
			show:false,
			isIphoneX:false,
			password:'',
			payPassword:'',
			liuyans:'',
			isblocking:false,
			id:'',
			status:'',
			storeName:'',
			storeid:'',
			radio:3,
			orderxq:['等待付款','等待发货','等待收货','已完成'],
			ordrpaylist:['','微信','支付宝','余额','益豆','微信+益豆'],
			//收货地址
			address:{name:'',tel:'',address:'',id:''},
			order:{peisong:'',liuyan:'',paytype:'',storename:'',ordertime:'',orderSn:'',peisongfei:''},
			//单件商品
			goodsInfo:[
				{
					pic:'',
					name:'',
					money:'',
					num:0,
					cname:'',
					shopname:''
				},
			],
			countMoney:0,//合计金额
			dibuorders:false,	//点击确认按钮时隐藏，防止重复点击
			isVal:0,
			//选择配送类型和支付类型
			payType:0,
			paylist:[
				{
					provider: 'alipay',
					name: '支付宝',
					icon: '/static/payment/alipay@2x.png'
				},
				{
					provider: 'wxpay',
					name: '微信',
					icon: '/static/payment/wechat@2x.png'
				},
			],
			orderWay:2
		}
	},
	onLoad(e) {
		this.id=e.id
		this.getData()
	},
	onShow() {
		if(this.update){
			this.getData()
		}
	},
	computed:{
		...mapState(['update','selAddress'])
	},
	onHide() {
		this.HideModal()
	},
	onBackPress() {
		this.HideModal()
	},
	methods: {
		...mapActions([ 'setUpdate']),
		async getData() {
			let { data:{status,orderSn,addr,desc,isval,addTime,payType,addrId,shrAddress,shrName,shrTel,storeName,storeId,num,price,money,isVal,goodName,store,pic,ggName} } = await this.$http.post('order.orderxq',{id:this.id})
			this.status=status
			if(addr.id!=''&&addr.id!=undefined&&addr.id!=null&&addr.id!=0){
				this.setAddress(addr)
			}
			this.storeName=storeName
			this.storeid=storeId 
			this.goodsInfo[0].pic=pic
			this.goodsInfo[0].money=price
			this.goodsInfo[0].name=goodName
			this.goodsInfo[0].cname=ggName
			this.goodsInfo[0].num=num
			this.isVal=isVal
			if(this.isVal=='4'){
				this.radio=4
			}
			this.order.liuyan=desc
			this.order.orderSn=orderSn
			this.order.ordertime=addTime
			this.order.paytype=payType
			this.countMoney=money
			this.isblocking=true
		},
		pushaddress(){
			uni.navigateTo({
				url:'/pages/address/index?type='+'select'
			})
		},
		//申诉退款
		shensu(){
			this.pushPage('/pages/order/shensu?id='+this.id)
		},
		async stuikuan(){
			let { data } = await this.$http.post('order.tuikuan', {id:this.id}, { tipConfig: {storeLoading: true, isSuccessTip: true, isSuccessBack: true, navigateBack: 1  } })
			this.setUpdate(true)
		},
		//取消
		quxiao(){
			this.ShowModal('onlineModal')
		},
		async sureshouhuo() {
			await this.$http.post('order.shouhuo', { id: this.id }, { tipConfig: {storeLoading: true, isSuccessTip: true } })
			this.getData()
			this.setUpdate(true)
		},
		async delorder() {
			await this.$http.post('order.shanchu', { id: this.id }, { tipConfig: {storeLoading: true, isSuccessTip: true, isSuccessBack: true, navigateBack: 1  } })
			this.setUpdate(true)
		},
		async quxiaosure() {
			if(this.status==0||this.status==3){
				await this.$http.post('order.quxiao', { id: this.id }, { tipConfig: {storeLoading: true, isSuccessTip: true, isSuccessBack: true, navigateBack: 1  } })
				this.HideModal()
				this.setUpdate(true)
			}
		},
		async payOrders() {
			try{
				this.dibuorders = false
				//商品结算信息
				let information ={
					addrId:this.selAddress.id,
					desc:this.liuyans,
					orderSn:this.order.orderSn,
					payType: this.radio,
				}
				if(this.radio==1){
					let { data } = await this.$http.post('order.cartconfirm', information,{ tipConfig: { isSuccessTip: false } })
					this.requestPayment(data)
				}
				if(this.radio==2){
					uni.showToast({
						title: '支付方式未开通',
						icon: 'none'
					})
				}
			}catch(e){
				this.dibuorders=true
			}
			
		},
		async payOrder() {
			try{
				this.dibuorders = false
				//商品结算信息
				let information ={
					addrId:this.selAddress.id,
					desc:this.liuyans,
					orderSn:this.order.orderSn,
					payType: this.radio,
					payPassword:this.payPassword
				}
				if(this.radio==3||this.radio==4){
					let { data } = await this.$http.post('order.cartconfirm', information,{ tipConfig: { isSuccessTip: true } })
					setTimeout(() => {
						this.setOrder(2)
						this.getData()
						this.show=false
						this.setUpdate(true)
					}, 800);
				}else{
					uni.showToast({
						title:'该支付方式暂未开通',
						icon:'none'
					})
					this.dibuorders = true
					return false
				}
			}catch(e){
				this.dibuorders=true
			}
			// this.payailrali(data,paytype)
		},
		async requestPayment(data) {
			let provider =''
			if(this.radio==1){
				provider='wxpay'
			}else{
				provider='alipay'
			}
			let [err, res] = await uni.requestPayment({
				provider: provider,
				orderInfo: data
			})
			if (res) {
				this.dibuorders = false
				uni.showToast({
					title: '支付成功',
					icon: 'success'
				})
				setTimeout(() => {
					this.setOrder(2)
					this.getData()
					this.setUpdate(true)
				}, 1500);
			}
			if (err) {
				uni.showToast({
					title: '支付失败!重新支付',
					icon: 'none'
				})
				this.dibuorders = true
			}
		},
		topingjia(item,index){
			 if(this.status==4){
			 	uni.navigateTo({
			 		url:'/pages/order/pingjia?orderid='+item.orderList+'&goodsid='+item.goodsId+'&pic='+item.pic+'&name='+item.name
			 	})
			 }else{
			 	return false
			 }
		},
		key(key) {
			if (this.password.length < 6) {
				this.password += key;
				if (this.password.length == 6) {
					this.payPassword=this.password
					this.payOrder()
				}
			}
		},
		clear() {
			this.password = '';
		},
		close() {
			this.password = '';
			this.trantision = false;
			this.show=false
		},
		del() {
			if (this.password.length > 0) {
				this.password = this.password.substring(0, this.password.length - 1);
			}
		},
		isqueren(){
			if(this.selAddress.id==''||this.selAddress.id==null||this.selAddress.id==undefined||this.selAddress.id==0){
				uni.showToast({
					title:'请设置收货地址',
					icon:"none"
				})
				return false
			}
			if(this.radio==3||this.radio==4){
				this.show=true
			}else{
				if(this.radio==5){
					uni.showToast({
						title:'该支付方式暂未开通',
						icon:'none'
					})
				}else{
					this.payOrders()
				}
			}
		},
	}
}
</script>

<style>
.wsaddress{
	width: calc(100% - 148rpx);
	margin-left: 30rpx;
}
.pingjiabox{
	width: 100rpx;
	height: 50rpx;
	background-image: linear-gradient(to right, #FF8463, #FE4725) !important;
	color: #FFFFFF;
	border-radius: 5rpx;
}
.mworde{
	width: calc(100% - 170rpx);
}
.dibuorder{
	position: fixed;
	z-index: 199;
	bottom: 0;
}
.addrsspic{
	width: 32rpx;
	height: 44rpx;
}
.mb50{
	margin-bottom: 100rpx;
}
.block10{
	width: 20rpx;
	height: 20rpx;
}
.choice-line{
	width: 100%;
	height: 1rpx;
	background-color: #edeeef;
}
.py24{
	padding-top: 48rpx;
	padding-bottom: 48rpx;
}
.confirm-box{
	width: 100%;
	height: 110rpx;
	background-color: #FFFFFF;
	position: fixed;
	bottom: 0;
}
.confirm-box-button{
	width: 285rpx;
	height: 110rpx;
	background-color: #FE4725;
}
.confirm-fenge{
	height: 130rpx;
	background-color: #F7F7F7;
}
.orderxq-boxs{
	background-image: linear-gradient(to right, #FF8463, #FE4725) !important;
	height: 160rpx;
}
.liuyan-box{
	width: calc(100% - 200rpx);
}
.order-xq-boxs{
	margin-bottom: 130rpx;
}
.order-del{
	border: 0.5px solid #FE4725;
	border-radius: 5rpx;
	width: 160rpx;
	height: 60rpx;
	color: #FE4725;
}
.order-quxiao{
	border: 0.5px solid #CCCCCC;
	border-radius: 5rpx;
	color: #000000;
	width: 160rpx;
	height: 60rpx;	
}
.block19{
	width: 38rpx;
	height: 38rpx;
}
</style>
